<template>
  <div class="userSetting">
    <el-tabs v-model="activeName" style="border:1px solid #f3f5f9">
      <el-tab-pane label="个人设置" name="first">
        <div class="setting_inner">
          <h2>基本信息</h2>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleFormRef"
            label-width="100px"
            class="demo-ruleForm"
            :label-position="labelPosition"
            status-icon
          >
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                show-password
              ></el-input>
              <i class="iconfont icon-3702mima"></i>
            </el-form-item>
            <el-form-item label="重复密码" prop="passwordAgain">
              <el-input
                type="password"
                v-model="ruleForm.passwordAgain"
                autocomplete="off"
                show-password
              ></el-input>
              <i class="iconfont icon-3702mima"></i>
            </el-form-item>
            <el-form-item>
              <el-button type="info" @click="handlerReset">重置</el-button>
              <el-button type="primary" @click="handleruserSet"
                >确认修改</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { userSet } from "../../utils/api";
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      const reg = /^[0-9A-Za-z]{6,16}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确的密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      activeName: "first",
      labelPosition: "top",
      ruleForm: {
        userName: "",
        password: "",
        passwordAgain: "",
        phone: ""
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        passwordAgain: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    handleruserSet() {
      this.postRequest(userSet, this.ruleForm).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    handlerReset() {
      this.$refs.ruleFormRef.resetFields();
    }
  },
  created() {
    const phone = JSON.parse(window.sessionStorage.getItem("userInfo"));
    this.ruleForm.phone = phone.phone;
  }
};
</script>
<style lang="less">
.userSetting {
  border: 1px solid #edeff4;
  .setting_inner {
    width: 30%;
    margin: 0 auto;
    .demo-ruleForm {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 100px;
    }
  }
  .el-tabs__nav-scroll {
    overflow: hidden;
    display: flex;
    justify-content: center;
    justify-items: center;
    padding: 30px;
  }
  .el-tabs__item {
    font-size: 18px;
    font-family: "Microsoft YaHei";
  }
}
</style>
